<template>
    <div v-if="form && form.id && fileList">
   <div class="text">
        店铺管理
        <el-button type="primary" @click="btn">保存店铺信息</el-button>
    </div>
    <el-form :model="form" label-width="auto" >
      <el-form-item label="店铺名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="店铺公告">
        <el-input v-model="form.bulletin" type="textarea"  :rows="5"/>
      </el-form-item>
      <el-form-item  label="店铺头像">
  <el-upload
    class="avatar-uploader"
    :action="'/api/shop/upload'"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="form.avatar" :src="serverUrl+form.avatar" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
      </el-form-item>
    <el-form-item  label="店铺介绍图">
        <el-upload
    v-model:file-list="fileList"
    :action="'/api/shop/upload'"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
    </el-form-item>
      
    <el-form-item label="起送价格">
        <el-input v-model="form.minPrice" type="number" />
      </el-form-item>

      <el-form-item label="送达时间">
        <el-input v-model="form.deliveryTime" type="number" />
      </el-form-item>
      <el-form-item label="配送描述">
        <el-input v-model="form.description"/>
      </el-form-item>

      <el-form-item label="店铺评分">
        <el-input v-model="form.score" type="number" />
      </el-form-item>
      <el-form-item label="店铺销量">
        <el-input v-model="form.sellCount" type="number" />
      </el-form-item>

      <el-form-item label="店铺活动">
        <el-checkbox-group v-model="form.supports">
          <el-checkbox value="单人精彩套餐" name="type">
            单人精彩套餐
          </el-checkbox>
          <el-checkbox value="VC无限橙果汁全场8折" name="type">
            VC无限橙果汁全场8折
          </el-checkbox>
          <el-checkbox value="在线支付满28减5" name="type">
            在线支付满28减5
          </el-checkbox>
          <el-checkbox value="特价饮品八折抢购" name="type">
            特价饮品八折抢购
          </el-checkbox>
          <el-checkbox value="中秋特惠" name="type">
            中秋特惠
          </el-checkbox>
          <el-checkbox value="国庆特价" name="type">
            国庆特价
          </el-checkbox> 
           <el-checkbox value="春节1折折扣" name="type">
            春节1折折扣
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="营业时间" style="width: 450px;">
        <el-time-picker
          v-model="form.date"
          is-range
          range-separator="至"
          start-placeholder="Start time"
          end-placeholder="End time"
        />
        </el-form-item>
    </el-form>
    </div>

    <el-dialog v-model="dialogVisible">
    <img w-full class="dialog-img" :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import {serverUrl} from '@/utils/common'
import { ElMessage } from 'element-plus';
import { shopInfo,shopEdit } from '../../api/shop'
import { Plus } from '@element-plus/icons-vue'
// import { Delete, Download, Plus, ZoomIne } from 'element-plus'

const form = ref({
  id:'',
  name:'',
  bulletin:'',
  avatar:'',
  pics:'',
  minPrice:'',
  deliveryTime:'',
  description:'',
  score:'',
  sellCount:'',
  supports:[],
  date:''
})

// 店铺多图
const fileList = ref([])
// 预览图片的弹窗
const dialogVisible = ref(false)
// 预览图片的路径
const dialogImageUrl = ref('')

const getShopInfo=async()=>{
  try {
    const res = await shopInfo()
    form.value = res.data
    // 安全处理pics数据
    fileList.value = res.data.pics?.map(item => ({
      name: item,
      url: serverUrl + item
    })) || [] // 如果pics不存在则返回空数组
  } catch (error) {
    console.error('获取店铺信息失败:', error)
    ElMessage.error('加载店铺信息失败')
  }

}
getShopInfo();

const btn = async () => {
  // 浅拷贝数据
  const formData = {...form.value}
  // 修改部分不满足提交格式的数据 重组提交数据
  formData.date = JSON.stringify(formData.date)
  formData.supports = JSON.stringify(formData.supports)
  formData.avatar = formData.avatar.slice(formData.avatar.lastIndexOf('/')+1)
  const pics = fileList.value.map((item)=>{
    // 如果没有response 证明这张图没有修改，直接用item.name做截取
    // 如果有response 证明这张图修改了，用item.response.imgUrl做截取
      let filename=  item.name;
      if(item.response){
        filename = item.response.imgUrl
      }
     let index =filename.lastIndexOf('/')
    return filename.slice(index+1);
  })

  formData.pics = JSON.stringify(pics)

  let {code,msg} = await shopEdit(formData)
  if(code==0){
    ElMessage.success(msg)
    // 刷新页面--重新请求 默认数据--重新渲染页面
    getShopInfo()
  }else{
    ElMessage.error(msg)
  }
}

const beforeAvatarUpload= (rawFile) => {
  if (!rawFile.type.includes('image')) {
    ElMessage.error('店铺头像必须是图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}

const handlePictureCardPreview=(res)=>{
  dialogImageUrl.value = res.url
  dialogVisible.value=true
}
const handleRemove = (res)=>{
  console.log(res);
  
}
const handleAvatarSuccess=(res)=>{
  form.value.avatar=res.imgUrl
}
</script>

<style  scoped>

.text{
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #f0f2f5;
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    text-align: center;
  }
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>